<template>
  <el-container style="height: 100vh;">
    <el-header>
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="4">
          <!-- <el-input placeholder="搜索" v-model="searchQuery" style="width: 200px;">
            <template #append>
              <el-button type="primary">搜索</el-button>
            </template>
          </el-input> -->
        </el-col>
        <el-col :span="4">
    <el-button type="success" @click="addCar" class="custom-add-car-button">
      <i class="el-icon-car"></i> 添加爱车
    </el-button>
  </el-col>
      </el-row>
    </el-header>

    <el-carousel indicator-position="outside" height="300px" class="carousel-image" >
      <el-carousel-item v-for="item in CouponList">
        <el-card shadow="hover" class="carousel-image" >
          <img :src="item.couponImage" alt="Carousel Image" class="carousel-image" @click="claimCoupon(item.couponId)">
          <!-- <div class="carousel-content">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div> -->
        </el-card>
      </el-carousel-item>
    </el-carousel>

    <el-main >
      <!-- <el-row>
        <el-col :span="8">
          <el-button type="primary" @click="addCar"> <el-card :body-style="{ padding: '14px' }" class="icon-box">
            <img src="../../static/image/xiche.png" class="image" alt="添加爱车图标">
            <div style="padding: 14px;">
              <span>添加爱车</span>
            </div>
          </el-card>
          </el-button>
        </el-col>

      </el-row> -->






      <el-row :gutter="20" style="margin-top: 40px;">
        <el-col :span="4" >
          <el-button type="text" @click="xiche">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/xiche.png" class="images" alt="洗车图标">
              <div style="padding: 14px;">
                <span>洗车</span>
              </div>
            </el-card>
          </el-button>
        </el-col>

        <el-col :span="4" >
          <el-button type="text" @click="gouwu">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/5.png" class="images" alt="购物图标">
              <div style="padding: 14px;">
                <span>购物</span>
              </div>
            </el-card>
          </el-button>
        </el-col>


        <el-col :span="4" >
          <el-button type="text" @click="xiche">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/1.png" class="images" alt="救援图标">
              <div style="padding: 14px;">
                <span>救援</span>
              </div>
            </el-card>
          </el-button>
        </el-col>


        <el-col :span="4" >
          <el-button type="text" @click="baoyang">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/2.png" class="images" alt="保养图标">
              <div style="padding: 14px;">
                <span>保养</span>
              </div>
            </el-card>
          </el-button>
        </el-col>

        <el-col :span="4" >
          <el-button type="text" @click="xiche">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/3.png" class="images" alt="修车图标">
              <div style="padding: 14px;">
                <span>修车</span>
              </div>
            </el-card>
          </el-button>
        </el-col>
        <el-col :span="4" >
          <el-button type="text" @click="xiche">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/4.png" class="images" alt="检查图标">
              <div style="padding: 14px;">
                <span>检查</span>
              </div>
            </el-card>
          </el-button>
        </el-col>

    
      </el-row>

      <el-row :gutter="20" style="margin-top: 120px;">
     <!-- <el-col :span="8">
      <el-upload
         class="avatar-uploader"
         action="http://localhost:80/coupons/couponDetails/insertcouponimage"
         :on-success="handleAvatarSuccess1"
       >
         <img v-if="addimage" src="https://daiyuanping888.oss-cn-chengdu.aliyuncs.com/c98271f4-9787-4dbb-83f7-2411da2d8ba6.jpg" class="avatar" style="width: 200px; height: 200px;">
         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
       </el-upload>
     </el-col> -->

     <el-col :span="4" >
          <el-button type="text" @click="xiche">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/7.png" class="images" alt="保险图标">
              <div style="padding: 14px;">
                <span>保险</span>
              </div>
            </el-card>
          </el-button>
        </el-col>

        
     <el-col :span="4" >
          <el-button type="text" @click="xiche">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/8.png" class="images" alt="补胎图标">
              <div style="padding: 14px;">
                <span>补胎换胎</span>
              </div>
            </el-card>
          </el-button>
        </el-col>

        <el-col :span="4" >
          <el-button type="text" @click="xiche">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/6.png" class="images" alt="优惠加油图标">
              <div style="padding: 14px;">
                <span>优惠加油</span>
              </div>
            </el-card>
          </el-button>
        </el-col>

        <el-col :span="4" >
          <el-button type="text" @click="xiche">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/9.png" class="images" alt="换电瓶图标">
              <div style="padding: 14px;">
                <span>换电瓶</span>
              </div>
            </el-card>
          </el-button>
        </el-col>

        <el-col :span="4" >
          <el-button type="text" @click="xiche">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/10.png" class="images" alt="刹车图标">
              <div style="padding: 14px;">
                <span>修刹车</span>
              </div>
            </el-card>
          </el-button>
        </el-col>

        <el-col :span="4" >
          <el-button type="text" @click="xiche">
            <el-card :body-style="{ padding: '14px' }" class="icon-box">
              <img src="../../static/image/11.png" class="images" alt="空调图标">
              <div style="padding: 14px;">
                <span>空调维修</span>
              </div>
            </el-card>
          </el-button>
        </el-col>

      </el-row>







      <el-drawer
       v-model="isShow"
       direction="top"
       style="width: 1445px; height: 400px;"
       >
       <el-table 
       :data="lists"
       >
       <!-- <el-table-column prop="couponId" label="ID" width="200px"></el-table-column> -->
       <el-table-column prop="title" label="优惠券名称" style="width: 150px;"></el-table-column>
       <el-table-column prop="startDate" label="优惠券开始时间" style="width: 150px;"></el-table-column>
       <el-table-column prop="endDate" label="结束时间" style="width: 150px;"></el-table-column>
       <el-table-column prop="minSpend"   label="最低消费及折扣"   style="width: 100px;">
        <template v-slot="scope">
              {{scope.row.minSpend > 0 ? scope.row.minSpend+'元' : scope.row.discount+'折' }} 
            </template>
       </el-table-column>
       <el-table-column label="优惠券图片"style="width: 100px;">
  <template v-slot="scope">
    <img :src="scope.row.couponImage" class="cover-image" alt="优惠券图片" style="width: 100px; height: 100px;">
  </template>
</el-table-column>


<el-table-column prop="type" label="类型" style="width: 100px;">
        <template v-slot="scope">
              {{scope.row.type==0?'满减':'折扣'}}
            </template>
       </el-table-column>

<el-table-column prop="description" label="描述" width="150px"></el-table-column>
       <el-table-column
                label="操作"
                width="150px"
                align="center">
                <template #default="scope">
           
                <el-button type="primary" @click="addcoupons(scope.row.couponId)"  round>领取</el-button>
              </template>
              </el-table-column>
  </el-table>



        </el-drawer>




    </el-main>

    <el-footer>
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" router>
        <el-menu-item index="/homepage">首页</el-menu-item>
        <el-menu-item index="/store">门店</el-menu-item>
        <el-menu-item index="/towing-application">拖车申请</el-menu-item>
        <el-menu-item index="/producttable">购物商城</el-menu-item>
        <el-menu-item index="/ordermanagement">购物订单</el-menu-item>
        <el-menu-item index="/commodity">购物车</el-menu-item>
        <el-menu-item index="/usercenter">个人中心</el-menu-item>
      </el-menu>
    </el-footer>
  </el-container>
</template>
<script>
import { Static } from 'vue';

export default {
  data() {
    return {
      searchQuery: '',
      activeIndex: '/home',
      addimage:"https://daiyuanping888.oss-cn-chengdu.aliyuncs.com/c98271f4-9787-4dbb-83f7-2411da2d8ba6.jpg",
      carouselItems: [
        { title: '轮播图标题1', description: '描述1', image: "https://daiyuanping888.oss-cn-chengdu.aliyuncs.com/4c86b256-e9ae-4621-906e-20ce430c3117.jpg" },
        { title: '轮播图标题2', description: '描述2', image: "https://daiyuanping888.oss-cn-chengdu.aliyuncs.com/4c86b256-e9ae-4621-906e-20ce430c3117.jpg" },
        // 更多轮播图项...
      ],
      isShow: false,
      SelectCoupon:{
      couponId: null,
      pageNum: 1,
      pageSize: 2,
    },
    CouponList: {},
    selectcouponone:{
      couponId:null,
      pageNum:1,
      pageSize:2
    },
    lists:[],
    couponId:'',
    };
  },
  methods: {
    baoyang(){
      this.$router.push('/servicemaintenance');
    },
    gouwu(){
      this.$router.push('/producttable');
     
    },
    addcoupons(obj){
      console.log(obj);
     
      this.$http.get("/coupons/userCoupons/addcoupons",{
        params:{
          couponId:obj
        }}).then(resp=>{
        if(resp.data.code == 200) {
        alert(resp.data.message);
        }else{
          alert(resp.data.message);
        }
        
        this.isShow=false;

      })
    },
    

    claimCoupon(obj){
      this.selectcouponone.couponId=obj;
      this.$http.post("/coupons/couponDetails/searchfordiscountcoupons",this.selectcouponone).then(resp=>{
        if(resp.data.code == 200) {
          // console.log(resp.data.data);
         this.lists=resp.data.data.records;
         console.log(this.lists);
        }
      })
      this.isShow=true;
    },
    xiche() {
      console.log('洗车');
      this.$router.push('/login');
    },
    addCar() {
      console.log('添加爱车');
      // 添加爱车逻辑
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleServiceClick(service) {
      console.log('Service clicked:', service);
      // 处理服务项点击逻辑
    },
    handlePromotionClick(promotion) {
      console.log('Promotion clicked:', promotion);
      // 处理促销项点击逻辑
    },

    searchfordiscountcoupons(){
      // this.$router.push('/searchfordiscountcoupons');
      this.$http.post("/coupons/couponDetails/searchfordiscountcoupons",this.SelectCoupon).then(resp=>{
        if(resp.data.code == 200) {
          console.log(resp.data.data);
         this.CouponList=resp.data.data.records;
        }
       })
    }



  },
  created(){
    this.searchfordiscountcoupons();
  }  
};
</script>
<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ff4500;
  color: white;
  padding: 10px 20px;
}
.el-main {
  margin-top: 20px;
}
.el-input {
  width: 200px;
}

.el-button {
  margin-left: 10px;
}

/* .carousel {
  height: auto;
  margin: 20px 0;
}

.carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  
}



.carousel-content {
  padding: 10px;
} */

.carousel-image {
  width: 1410px;
  height: 300px;
  /* object-fit: cover; */
}

.icon-box, .promotion-box {
 width: 200px;
 height: 140px;
}

.icon-box:hover, .promotion-box:hover {
  transform: scale(1.05);
}

.image, .promotion-image {
  width: 100%;
  display: block;
}
.images{
  margin-top:10px;
  width: 100px;
  height: 80px;
}
.custom-add-car-button {
  background: linear-gradient(90deg, #4caf50, #8bc34a); /* 渐变色 */
  color: white;
  border: none; /* 去除默认边框 */
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 25px; /* 圆角 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 阴影 */
  transition: all 0.3s ease-in-out; /* 平滑过渡 */
}

.custom-add-car-button:hover {
  transform: scale(1.05); /* 悬停时放大 */
  background: linear-gradient(90deg, #388e3c, #689f38); /* 更深的渐变色 */
}

.custom-add-car-button i {
  margin-right: 8px; /* 图标与文本间距 */
}
</style>